
<!doctype html>

<html>

 <head>

  <title>WarGames Simulation</title>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

  <script type="text/javascript">

        

   //populate "all patients" list
   
   function getAllPatients() {

      $('#allpatients').html("");

      $('#loadingpatients').show();

      $.ajax({

	  
            url: "http://plato.cs.virginia.edu:8080/ApertureScience/patients",

            type: "GET",

            dataType: "json",

            success: function(data, textStatus, jqXHR) {

               $('#loadingpatients').hide();

               var html = "<table>";

               for(var x = 0; x < data.length; x++) {

                  html += "<tr>";
                  html += "<td><a class=\"patient\" href=\"#" + data[x]._id + "\" onclick=\"getPatient(" + data[x]._id + ");updateBox()\">" + data[x].lastname + ", " + data[x].firstname + "</a></td>";
                  html += "<td><a class=\"error\" href=\"#" + data[x]._id + "\" onclick=\"delPatient(" + data[x]._id + ")\">(delete)</a></td>";
                  html += "</tr>";
               }

               html += "</table>";

               $('#allpatients').html(html);
			   

            }

      });

   }

	function updateBox(){
		$('#actionList').val("");
	}

	 function getAllActions() {
     $.ajax({

        
          url: "http://plato.cs.virginia.edu:8080/ApertureScience/actions",

          type: "GET",

          dataType: "json",

          success: function(data, textStatus, jqXHR) {

             var html = "";

             for(var x = 0; x < data.length; x++) {
                html += '<option value="' + data[x]._id + '">' + data[x].name + '</option>';
             }          

             $('#action').html(html);
          }

    });
	 }

   $(getAllPatients);
   $(getAllActions);
   

   var currentID = 1;
   function getPatient(id) 
   {   
		   
	  currentID = id;
      $('#loadingpatient').show();

      $.ajax({

         url: "http://plato.cs.virginia.edu:8080/ApertureScience/patients/" + id,

         type: "GET",

         dataType: "json",

         success: function(data, textStatus, jqXHR) {

            $('#loadingpatient').hide();

            display = (""+data.state).split(',');

            $('#name').val(data.lastname + ", " + data.firstname);

            $('#description').val(data.description);

            $('#cardiacstate').val(display[0]);

            $('#respiratorystate').val(display[1]);

            $('#renalstate').val(display[2]);
   
            $('#submit').val("Take action");
         }

      });

   }

   function delPatient(id) {
      $.ajax({
         url: "http://plato.cs.virginia.edu:8080/ApertureScience/patients/" + id,
         type: "DELETE",
         success: function(data, textStatus, jqXHR) {
            getAllPatients();
         }
      });
   }

   //should set some global variable, or maybe hide the "take action" button and show a "create

   //patient" button, which would change the function from a POST to a PUT

   function createNew() {

      var wnd = window.open("create.html", "", "status = 1, width = 350, height = 300, resizable = 0");

   }



   //either POST or PUT depending on whether taking an action or creating a new patient

   function takeAction() {

      $('#loadingpatient').show();

   var actionId = $('#action').val();
   var e = $('#action')[0];
   var actionName = e.children[e.selectedIndex].innerText;
   
   
   $('#actionList').val(document.getElementById("actionList").value + actionName + " -> ");
   
      $.ajax({

         url: "http://plato.cs.virginia.edu:8080/ApertureScience/patients/" + currentID + "/" + actionId,

         type: "PUT",

         dataType: "json",

         success: function(data, textStatus, jqXHR) {

		 
		 
         getPatient(currentID);
         }

      });
   }

  </script>

  <style type="text/css">

   body { font-family: "Arial", "Sans serif"; }

   div#main { width: 60%; }

   div#main h2, div#main h3 { text-align: center; }

   div#main fieldset#patientlist { width: 25%; float: left; border-top-left-radius: 25px; border-bottom-left-radius: 25px; height: 330px; }

   div#main fieldset#patientlist div#allpatients { max-height: 285px; overflow: auto; }

   div#main fieldset#patientlist div#allpatients table a.error { font-size: smaller; color: red; font-weight: bold; }

   div#main fieldset#patientlist div#loadingpatients { display: none; text-align: center; }

   div#main fieldset#patientform { width: 65%; border-top-right-radius: 25px; border-bottom-right-radius: 25px; height: 330px; }
   
   div#main fieldset#patientform form { max-height: 300px; overflow: auto; }

   div#main fieldset#patientform td:first-child { font-weight: bold; }

   div#main fieldset#patientform div#loadingpatient { display: none; text-align: center; }

  </style>

 </head>

 <body>

  <div id="main">

   <h2>WarGames Medical Simulation</h2>
   <h3>Patient Simulator</h3>

   <fieldset id="patientlist">

    <legend>All Patients</legend>

    <div id="loadingpatients">

     Loading patients...<br><img src="loading.gif">

    </div>

    <div id="allpatients">

    </div>

    <input type="button" value="Create new patient" onclick="createNew()">

   </fieldset>

   <fieldset id="patientform">

    <legend>Current Patient</legend>

    <form>

     <table>
      
      <tr>

       <td>Name:</td>

       <td><input type="text" id="name" name="name" readonly="readonly"></td>


      </tr>

      <tr>

       <td>Description:</td>

       <td><input type="text" id="description" name="description" readonly="readonly"></td>


      </tr>

      <tr>

       <td>Cardiac state:</td>

       <td><input type="text" id="cardiacstate" name="cardiacstate" readonly="readonly"></td>

      </tr>

      <tr>

       <td>Respiratory state:</td>

       <td><input type="text" id="respiratorystate" name="respiratorystate" readonly="readonly"></td>

      </tr>

      <tr>

       <td>Renal state:</td>

       <td><input type="text" id="renalstate" name="renalstate" readonly="readonly"></td>

      </tr>

      <tr>

       <td>Action:</td>

       <td>

        <select id="action" name="action">

         <option value="1">Pain Medication</option>

         <option value="2">Fluid bolus</option>

         <option value="3">Oxygen</option>

         <option value="4">Metoprolol</option>
		 
		  <option value="5">Narcan</option>

        </select>

       </td>

      </tr>

     </table>

     <input type="button" name="submit" id="submit" value="Take action" onclick="takeAction()">
	 
	 <br>
	 <br>
	 
	 <b>Actions Taken: </b> 
	
	 <input type="text" id="actionList" name="actionList" readonly="readonly" size="50">

    </form>

    <div id="loadingpatient">

     Loading patient...<br><img src="loading.gif">

    </div>

   </fieldset>

   <a href="actionmanager.html">Go to action manager</a>

  </div>

 </body>

</html>